<template>
  <view class="container">
    <!-- 列表页 -->
    <view class="card-list">
      <view
        class="card"
        v-for="(item, index) in vehicles"
        :key="index"
        @click="goOperateDetails(item.id)"
      >
        <view class="list-item">
          <text class="vehicle-number">{{ item.number }}</text>
          <text class="color-label">{{ item.color }}</text>
          <view class="status-container">
            <u-icon
              name="arrow-right"
              size="16"
              color="#C0C0C0"
              class="arrow-icon"
            ></u-icon>
          </view>
          <br />
        </view>
        <view>
          <span class="applicant">申请人：{{item.applyPerson}}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vehicles: [
        {
          id: "1",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "2",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "3",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "4",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "5",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "6",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
        {
          id: "7",
          number: "鄂ARU932",
          color: "黄色",
          applyPerson: "张宇",
        },
      ],
    };
  },
  methods: {
    // 其他方法
    goOperateDetails(id) {
      uni.redirectTo({
        url: "/pages/hub_ygzw/charterapply/charterapplyDetails?id=" + id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  height: 100vh;
  width: 100%;
}

.card-list {
  padding: 10px;

  .card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 20px;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .vehicle-number {
        font-size: 16px;
        color: #2c3e50;
        margin-right: 10px;
      }
      .color-label {
        background-color: #ffd700;
        color: white;
        width: 44px;
        height: 22px;
        line-height: 22px;
        border-radius: 3px;
        margin-right: auto;
        text-align: center;
        font-size: 12px;
      }
      .status-container {
        display: flex;
        align-items: center;
        .arrow-icon {
          margin-left: 5px;
        }
      }
    }
    .applicant {
      font-size: 12px
    }
  }
}
</style>
